<script setup lang="ts">
import type { EquipmentInfo } from '../type'

import BlockHead from './block-head.vue'

defineOptions({
  name: 'ItemServen',
})
const props = defineProps<{
  czjbf: EquipmentInfo['czjbf']
  fjhhj: EquipmentInfo['fjhhj']
  bzjy: EquipmentInfo['bzjy']
  bzjf: EquipmentInfo['bzjf']
  jqr: EquipmentInfo['jqr']
}>()
const czfTogthers = computed(() => {
  return props.czjbf.slice(0, 6)
})
const czf = computed(() => {
  return props.czjbf.slice(6, 9)
})
const ytbzjTogthers = computed(() => {
  return props.bzjy.slice(0, 3)
})
const ytbzj = computed(() => {
  return [null, ...props.bzjy.slice(3, 5)]
})
function isRunning(status: 0 | 1) {
  return status === 1
}
function substring(str: string | number, len: number = 4) {
  str = str.toString()
  return str.length >= len ? str.substring(0, len) : str.padStart(len, '0')
}
</script>

<template>
  <div class="h-full w-full flex flex-auto flex-col">
    <BlockHead is-big title="工艺看板" />
    <div class="block-body h-150 w-full flex flex-auto flex-col items-center gap-3 overflow-auto p-3">
      <div class="w-full flex flex-3/5 items-center ring-1 ring-[rgba(26,121,181,0.5)]">
        <div class="mx-4 h-40 whitespace-nowrap rounded-12 bg-[rgba(46,137,250,0.15)] px-2 text-center text-sm write-vertical-left opacity-80 shadow shadow-cyan shadow-inset">
          制液专区
        </div>
        <div class="h-full flex flex-auto items-center overflow-auto p-3">
          <div class="flex flex-2/3 items-center">
            <div v-for="i in 3" :key="i" class="item-czf-togther flex flex-1 flex-col">
              <img class="image-top" src="./equipment-images/czf-2.png" alt="czf-togther">
              <img v-if="ytbzjTogthers[i - 1] && isRunning(ytbzjTogthers[i - 1].status)" class="image-bottom" src="./equipment-images/ytbzj-2.png" alt="ytbzj-2">
              <img v-else class="image-bottom" src="./equipment-images/ytbzj-1.png" alt="ytbzj-1">
              <span class="meter-reading meter-reading-left font-pmzd">{{ substring(czfTogthers[2 * i - 2]?.value ?? '') }}</span>
              <span class="meter-reading meter-reading-right font-pmzd">{{ substring(czfTogthers[2 * i - 1]?.value ?? '') }}</span>
              <span class="equipment-num equipment-num-left font-pmzd">{{ substring(czfTogthers[2 * i - 2]?.number ?? '', 2) }}</span>
              <span class="equipment-num equipment-num-right font-pmzd">{{ substring(czfTogthers[2 * i - 1]?.number ?? '', 2) }}</span>
              <span class="fs-12 absolute right-0 top-0 opacity-50 font-pmzd">单位:kg</span>
            </div>
          </div>
          <div class="relative flex flex-1/3 items-center">
            <div v-for="i in 3" :key="i" class="item-czf flex flex-1 flex-col">
              <img class="image-top" src="./equipment-images/czf-1.png" alt="czf">
              <img v-if="ytbzj[i - 1] === null" class="image-bottom" style="width: 90px" src="./equipment-images/jq.png" alt="jq">
              <img v-else-if="ytbzj[i - 1] && isRunning(ytbzj[i - 1]!.status)" class="image-bottom" src="./equipment-images/ytbzj-2.png" alt="ytbzj-2">
              <img v-else class="image-bottom" src="./equipment-images/ytbzj-1.png" alt="ytbzj-1">
              <span class="meter-reading meter-reading-center font-pmzd">{{ substring(czf[i - 1]?.value ?? '') }}</span>
              <span class="equipment-num equipment-num-center font-pmzd">{{ substring(czf[i - 1]?.number ?? '', 2) }}</span>
            </div>
            <span class="fs-12 absolute right-0 top-0 opacity-50 font-pmzd">单位:kg</span>
          </div>
        </div>
      </div>
      <div class="w-full flex flex-2/5 items-center rounded ring-1 ring-[rgba(26,121,181,0.5)]">
        <div class="mx-4 h-40 whitespace-nowrap rounded-12 bg-[rgba(46,137,250,0.15)] px-2 text-center text-sm write-vertical-left opacity-80 shadow shadow-cyan shadow-inset">
          制粉专区
        </div>
        <div class="h-full flex flex-auto items-center overflow-auto p-3">
          <div class="flex flex-1/5 items-center">
            <div class="item-fjhhj flex flex-1 items-center justify-center">
              <img v-if="fjhhj[0] && isRunning(fjhhj[0].status)" src="./equipment-images/fjhhj-2.png" alt="fjhhj-2">
              <img v-else src="./equipment-images/fjhhj-1.png" alt="fjhhj-1">
            </div>
            <div v-if="false" class="item-csd flex flex-1 items-center justify-center">
              <img src="./equipment-images/csd.png" alt="csd">
            </div>
            <div class="item-jqr flex flex-1 items-center justify-center">
              <img v-if="jqr[0] && isRunning(jqr[0].status)" src="./equipment-images/jqr-2.png" alt="jqr-2">
              <img v-else src="./equipment-images/jqr-1.png" alt="jqr-1">
            </div>
          </div>
          <div class="flex flex-4/5 items-center">
            <div v-for="i in 3" :key="i" class="item-fjbzj flex flex-1 items-center justify-center">
              <img v-if="bzjf[i - 1] && isRunning(bzjf[i - 1].status)" src="./equipment-images/fjbzj-2.png" alt="fjbzj-2">
              <img v-else src="./equipment-images/fjbzj-1.png" alt="fjbzj-1">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-czf,
.item-czf-togther {
  position: relative;
  align-items: center;
  .image-bottom {
    width: 68px;
    height: 90px;
  }
}
.item-czf-togther {
  .image-top {
    width: 207px;
    height: 247px;
  }
}
.item-czf {
  .image-top {
    width: 80px;
    height: 247px;
  }
}
.item-fjhhj {
  img {
    width: 67px;
    height: 168px;
  }
}
.item-csd {
  img {
    width: 31px;
    height: 165px;
  }
}
.item-jqr {
  img {
    width: 117px;
    height: 115px;
  }
}
.item-fjbzj {
  img {
    width: 316px;
    height: 161px;
  }
}
.image-bottom {
  margin-top: -15px;
}
.equipment-num,
.meter-reading {
  display: block;
  position: absolute;
  border-radius: 2px;
  // background: rgba(226, 81, 252, 0.5);
  text-align: center;
}
.meter-reading {
  width: 47px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #18DEF5;
}
.equipment-num {
  width: 24px;
  height: 14px;
  font-size: 12px;
  line-height: 14px;
  color: #ffffff;
text-shadow: 1px 0px 1px #10649C;
}
.meter-reading-left {
  top: 69px;
  left: 50%;
  margin-left: -86px;
}
.meter-reading-right {
  top: 69px;
  left: 50%;
  margin-left: 41px;
}
.meter-reading-center {
  top: 69px;
  left: 50%;
  margin-left: -23px;
}
.equipment-num-left {
  top: 178px;
  left: 50%;
  margin-left: -74px;
}
.equipment-num-right {
  top: 178px;
  left: 50%;
  margin-left: 56px;
}
.equipment-num-center {
  top: 178px;
  left: 50%;
  margin-left: -11px;
}
</style>
